<!--
 * @Author: 袁三金
 * @Date: 2024-03-18 21:50:34
 * @LastEditors: 
 * @LastEditTime: 2024-03-18 23:41:34
 * @Description: 我的相册页面
-->
<template>
  <div class="all">
    <header class="header">
      <div class="header_left">全部相册</div>
    </header>
    <div class="image_main">
      <div class="context_click_menu" v-if="showFileMenu === index">
          <ul class="context_dropdown_menu">
            <li class="context_dropdown_menu_item">
              <div class="context_dropdown_menu_item_text">移至资源库</div>
            </li>
            <li class="context_dropdown_menu_item">
              <div class="context_dropdown_menu_item_text">查看详细信息</div>
            </li>
            <li style="background-color: rgb(132, 133, 141 , 0.08);height: 1px;margin: 4px 8px;"></li>
            <li class="context_dropdown_menu_item warn">
              <div class="context_dropdown_menu_item_text warn1">放入回收站</div>
            </li>
          </ul>
        </div>
      <div class="demo-image__preview"  v-for="item in imageList" :key="item.id">
        <el-image
          style="width: 170px; height: 170px"
          :src="item.url"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          id: 0,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 1,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
         
        },
        {
          id: 2,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          
        },
        {
          id: 3,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 4,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          id: 5,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
    };
  },
  methods:{
    showContextMenu(event) {
      // 阻止默认的右键菜单
      event.preventDefault();
      // 获取鼠标位置
      this.menuX = event.clientX;
      this.menuY = event.clientY;
      // 显示右键菜单
      this.showMenu = true;

      // 监听鼠标点击事件，隐藏右键菜单
      document.addEventListener("click", this.hideContextMenu);
    },
    hideContextMenu() {
      // 隐藏右键菜单
      this.showMenu = false;
      // 移除鼠标点击事件监听
      document.removeEventListener("click", this.hideContextMenu);
    },
  }
};
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 40px;
  padding-top: 24px;
  flex-direction: column;
  position: relative;
  .header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }
  .header_left {
    font-size: 18px;
    font-weight: 600;
    color: rgb(37, 38, 43);
  }
  .image_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .context_click_menu {
        width: 160px;
        padding: 4px;
        background-color: #fff;
        position: absolute;
        top: 34px;
        left: 96px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 100;

        .context_dropdown_menu {
          width: 152px;
          list-style: none;
          padding: 0;
          margin: 0;

          .context_dropdown_menu_item {
            display: flex;
            height: 36px;
            align-items: center;
            border-radius: 5px;
            width: 100%;

            .context_dropdown_menu_item_text {
              color: rgb(37, 38, 43);
              font-size: 14px;
              padding: 0 8px;
              font-family: Helvetica Neue, Helvetica, PingFang SC,
              Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            }

            .context_dropdown_menu_item_text.warn1 {
              color: rgb(255, 111, 102);
            }
          }

          .context_dropdown_menu_item:hover {
            background-color: rgb(132, 133, 141, 0.08);
          }

          .context_dropdown_menu_item.warn:hover {
            background-color: rgb(243, 91, 81, 0.12);
          }
        }
      }
    .demo-image__preview {
      height: 170px;
      width: 170px;
      margin-right: 10px;
    }
  }
}
</style>
